<template>
  <div class="bimage" >
    <el-card class="myCard">
      <div slot="header" class="clearfix">
        <el-button icon="el-icon-s-home" style="float: left; padding: 3px 0" type="text">张清赫项目后台管理</el-button>
      </div>
      <el-form ref="form" label-width="80px" :model="admin" style="width:400px;">
        <el-form-item label="用户">
          <el-input type="text" placeholder="手机号" v-model="admin.phone_number"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" show-password placeholder="请输入密码" v-model="admin.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginFu">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { login } from "../api";
export default {
  data() {
    return {
      admin: {
        phone_number: "",
        password: ""
      }
    };
  },
  methods: {
    /**登录 */
    async loginFu() {
      console.info(this.admin);
      let { data } = await login(this.admin);
      if (data.code == 1) {
        sessionStorage.setItem("token", data.other.token);
        this.$router.push("./home");
        this.$message.success(data.msg);
      } else {
        this.$message.error(data.msg);
      }
    }
  }
};
</script>

<style scoped>
.bimage{
  padding-top: 200px;
  width: 100%;
  height: 100%;
  background:url('../static/4.jpg') center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.myCard {
  width: 480px;
  margin: auto;
}
</style>